<template>
  <div class="diary-notes">
    <div class="header">
      <h1>日记</h1>
      <router-link to="/editor/diary" class="btn btn-primary">
        <span class="icon">+</span>
        写日记
      </router-link>
    </div>
    
    <div class="filters">
      <input 
        v-model="searchQuery" 
        type="text" 
        placeholder="搜索日记..." 
        class="input search-input"
      />
    </div>
    
    <div class="notes-list">
      <div 
        v-for="note in filteredNotes" 
        :key="note.id" 
        class="diary-card"
        @click="editNote(note)"
      >
        <div class="diary-header">
          <div class="diary-meta">
            <h3>{{ note.title }}</h3>
            <div class="diary-info">
              <span class="date">{{ formatDate(note.createdAt) }}</span>
            </div>
          </div>
          <div class="diary-actions">
            <button @click.stop="deleteNote(note.id)" class="btn btn-danger">删除</button>
          </div>
        </div>
        
        <div class="diary-content">
          <div class="markdown-preview" v-html="renderMarkdown(note.content)"></div>
        </div>
      </div>
    </div>
    
    <div v-if="filteredNotes.length === 0" class="empty-state">
      <p>暂无日记</p>
      <router-link to="/editor/diary" class="btn btn-primary">写下第一篇日记</router-link>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useNoteStore } from '@/stores/noteStore';
import { formatDate } from '@/utils/helpers';
import type { DiaryNote } from '@/types';

const router = useRouter();
const noteStore = useNoteStore();

const searchQuery = ref('');

const filteredNotes = computed(() => {
  let notes = noteStore.diaryNotes as DiaryNote[];
  
  if (searchQuery.value) {
    notes = notes.filter(note => 
      note.title.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      note.content.toLowerCase().includes(searchQuery.value.toLowerCase())
    );
  }
  
  return notes.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
});

const editNote = (note: DiaryNote) => {
  router.push(`/editor/diary/${note.id}`);
};

const deleteNote = (id: string) => {
  if (confirm('确定要删除这篇日记吗？')) {
    noteStore.deleteNote(id);
  }
};

// 简单的 markdown 渲染函数
const renderMarkdown = (content: string): string => {
  if (!content) return '';
  
  return content
    // 标题
    .replace(/^### (.*$)/gim, '<h3>$1</h3>')
    .replace(/^## (.*$)/gim, '<h2>$1</h2>')
    .replace(/^# (.*$)/gim, '<h1>$1</h1>')
    // 粗体和斜体
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    // 代码块
    .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
    .replace(/`([^`]+)`/g, '<code>$1</code>')
    // 链接
    .replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank">$1</a>')
    // 列表
    .replace(/^\* (.*$)/gim, '<li>$1</li>')
    .replace(/^- (.*$)/gim, '<li>$1</li>')
    // 段落
    .replace(/\n\n/g, '</p><p>')
    .replace(/^(?!<[h|p|li|pre|ul|ol])(.*$)/gim, '<p>$1</p>')
    // 清理多余的标签
    .replace(/<p><\/p>/g, '')
    .replace(/<p>(<[h|p|li|pre|ul|ol])/g, '$1')
    .replace(/(<\/[h|p|li|pre|ul|ol]>)<\/p>/g, '$1');
};
</script>

<style lang="scss" scoped>
.diary-notes {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: $spacing-lg;
    
    h1 {
      font-size: $font-size-xxl;
      color: $primary-color;
    }
    
    .btn {
      display: flex;
      align-items: center;
      gap: $spacing-xs;
      
      .icon {
        font-size: $font-size-large;
      }
    }
  }
  
  .filters {
    display: flex;
    gap: $spacing-md;
    margin-bottom: $spacing-lg;
    
    .search-input {
      flex: 1;
    }
  }
  
  .notes-list {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
    
    .diary-card {
      background-color: $secondary-color;
      border: $border-width solid $border-color;
      border-radius: $border-radius;
      padding: $spacing-lg;
      cursor: pointer;
      transition: all 0.2s ease;
      
      &:hover {
        border-color: $primary-color;
      }
      
      .diary-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: $spacing-md;
        
        .diary-meta {
          flex: 1;
          
          h3 {
            font-size: $font-size-xl;
            color: $primary-color;
            margin: 0 0 $spacing-sm 0;
          }
          
          .diary-info {
            display: flex;
            align-items: center;
            gap: $spacing-md;
            flex-wrap: wrap;
            
            .date {
              color: $text-light;
              font-size: $font-size-small;
            }
          }
        }
        
        .diary-actions {
          .btn-danger {
            background-color: #ff4757;
            color: $secondary-color;
            border-color: #ff4757;
            
            &:hover {
              background-color: #ff3742;
            }
          }
        }
      }
      
      .diary-content {
        margin-bottom: $spacing-md;
        
        .markdown-preview {
          color: $text-color;
          line-height: 1.6;
          
          h1, h2, h3 {
            color: $primary-color;
            margin: $spacing-md 0 $spacing-sm 0;
          }
          
          h1 {
            font-size: $font-size-xl;
          }
          
          h2 {
            font-size: $font-size-large;
          }
          
          h3 {
            font-size: $font-size-base;
          }
          
          p {
            margin: $spacing-sm 0;
          }
          
          code {
            background-color: $hover-color;
            padding: 2px $spacing-xs;
            border-radius: 2px;
            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
            font-size: $font-size-small;
          }
          
          pre {
            background-color: $hover-color;
            padding: $spacing-md;
            border-radius: $border-radius;
            overflow-x: auto;
            margin: $spacing-md 0;
            
            code {
              background: none;
              padding: 0;
            }
          }
          
          a {
            color: $primary-color;
            text-decoration: none;
            
            &:hover {
              text-decoration: underline;
            }
          }
          
          strong {
            font-weight: bold;
          }
          
          em {
            font-style: italic;
          }
          
          ul, ol {
            margin: $spacing-sm 0;
            padding-left: $spacing-lg;
          }
          
          li {
            margin: $spacing-xs 0;
          }
        }
      }
    }
  }
  
  .empty-state {
    text-align: center;
    padding: $spacing-xl 0;
    color: $text-light;
    
    p {
      margin-bottom: $spacing-lg;
      font-size: $font-size-large;
    }
  }
  
  @media (max-width: $breakpoint-mobile) {
    .header {
      flex-direction: column;
      gap: $spacing-md;
      align-items: stretch;
      
      .btn {
        justify-content: center;
      }
    }
    
    .filters {
      flex-direction: column;
    }
    
    .diary-card {
      .diary-header {
        flex-direction: column;
        gap: $spacing-md;
        
        .diary-actions {
          align-self: flex-end;
        }
      }
    }
  }
}
</style> 